<template>
  <div>
    <el-card>
      <div slot="header">
        <span>我的关注</span>
      </div>
      <el-empty v-if="!userCenterMyLikeUser" description="空空如也！" style="height: 615px;"></el-empty>
      <el-tabs v-else v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="用户" name="first">
          <div v-for="item in this.userCenterMyLikeUser" :key="item.id">
            <el-row :gutter="20" type="flex" justify="space-around">
              <el-col :span="3">
                <el-avatar :size="70" :src="item.follow.headimg"></el-avatar>
              </el-col>
              <el-col :span="17">
                <div class="like-content">
                  <a href="" class="like-content-title-username">{{ item.follow.username }}</a>
                  <p class="cloudN-center-content-text">{{ item.follow.sign }}</p>
                </div>
              </el-col>
              <el-col :span="4">
                <el-button v-if="item.is_like === 1" type="danger" size="mini" round>取消关注</el-button>
                <el-button v-else type="primary" size="mini" round>关注</el-button>
              </el-col>
            </el-row>
            <el-divider></el-divider>
          </div>
        </el-tab-pane>
        <el-tab-pane label="话题" name="second">
          <div v-for="item in this.userCenterMyLikeTopic" :key="item.id">
            <el-row :gutter="20" type="flex" justify="space-around">
              <el-col :span="3">
                <el-avatar shape="square" :size="70" :src="item.topic.img_url"></el-avatar>
              </el-col>
              <el-col :span="17">
                <div class="like-content">
                  <a href="" class="like-content-title-topic">{{ item.topic.title }}</a>
                  <p class="cloudN-content-text-topic">{{ item.topic.introduction }}</p>
                </div>
              </el-col>
              <el-col :span="4">
                <el-button v-if="item.is_like === 1" type="danger" size="mini" round>取消关注</el-button>
                <el-button v-else type="primary" size="mini" round>关注</el-button>
              </el-col>
            </el-row>
            <el-divider></el-divider>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { GetUrlParam } from '../../utils/getUrlParams'

export default {
  data () {
    return {
      activeName: 'first',
      userCenterMyLikeUser: [],
      userCenterMyLikeTopic: []
    }
  },
  created () {},
  // DOM对象加载完成时
  mounted () {
    this.getMyfollows()
  },
  methods: {
    handleClick () {
      // console.log(this.activeName)
      if (this.activeName === 'second') {
        this.getMyTopics()
      } else {
        this.getMyfollows()
      }
    },
    async getMyfollows () {
      const url = this.$config.urls.get('user_center_follow')
      const { data: res } = await this.$http.post(url)
      if (res.code !== 0) {
        this.$message.error('用户未登录！')
        // console.log(res)
      } else {
        // console.log(res.data)
        res.data.forEach(item => {
          item.creat_time = this.$date.diffTime(item.creat_time)
          item.is_like = 1
        })
        this.userCenterMyLikeUser = res.data
      }
    },
    async getMyTopics () {
      const url = this.$config.urls.get('user_topic')
      const { data: res } = await this.$http.post(url)
      if (res.code !== 0) {
        this.$message.error('用户未登录！')
        // console.log(res)
      } else {
        console.log(res.data)
        res.data.forEach(item => {
          item.creat_time = this.$date.diffTime(item.creat_time)
        })
        this.userCenterMyLikeTopic = res.data
      }
    }
  },
  computed: {},
  name: 'userArticle'
}
</script>

<style lang="less" scoped>
.el-button,
.el-avatar,
.like-content {
  margin: 0 auto; /*水平居中*/
  position: relative;
  top: 50%; /*偏移*/
  transform: translate(10px, -50%);
}
.like-content-title-username {
  font-weight: 600;
}

.like-content-title-topic {
  font-weight: 500;
}
.cloudN-content-text-topic {
  margin: 0;
  font-family: '微软雅黑', Arial, sans-serif;
  font-size: 12px;
  line-height: 30px;
  color: #999;
  overflow: hidden;
  /*无法容纳的长文本。文本被修剪了*/
  text-overflow: ellipsis;
  /*禁止折行*/
  white-space: nowrap;
}
.el-button {
  width: 80px;
}
</style>
